<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <link rel="stylesheet" type="text/css" href="common.css" />
        <script type="text/javascript" src='jquery-2.1.4.js'></script>

    </head>
    <body>
        <div class='container'>
            <div>
                <div class='title'>Menu1</div>
                <div class='body'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>
            
            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>
            
            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

        </div>

        <script type="text/javascript">
            $(function(){
                $('.title').click(function(){
                    $(this).parent().siblings().children('.body').addClass('hide');
                    $(this).next().removeClass('hide');
                });
            });
        </script>
    </body>
</html>